React工具包

常常在做環境建置的工作的時候
我們都只有乖乖的跟著教學走
其實常常很好奇到底裝的都是些什麼然後能幹嘛
但始終都被龐大數量的指令搞得頭昏腦脹而沒有真的去探究
難得有這個機會
這次我就來滿足自己長年以來的好奇心
所以!!!

本篇目標為：了解開發環境所需要的一些基本插件及安裝方式

要建置ReactJS的開發環境
我們會需要：

1. NodeJS & npm
2. Webpack bundler
3. Babel plugins
4. React & React Dom

下面讓我們逐一介紹每一項工具以及它的安裝方式

NodeJS & NPM

NodeJS 是一套開源伺服器框架(server framework)
透過 V8 執行 JavaScript 程式碼
且具有跨平台的特性
提供在伺服器端使用 JavaScript 編寫程式的功能

NPM (Node Package Manager)
是一套由 JavaScript 寫成的軟體套件管理系統
為 NodeJS 預設的使用模組
使用者可以透過 npm 指令來安裝/管理/維護/發布模組

安裝方式

至 NodeJS 官網
根據作業系統下載對應的壓縮檔
下載完成之後解壓縮執行node.exe進行安裝
npm 會隨著 NodeJS 一同安裝完成

由於他們是所有套件（package）的管理者
所以安裝完 npm 後
要建立一個接下來工作區域的資料夾（根目錄位置）
然後開啟 CMD（命令提示字元）或 Terminal 先下一個指令：

• npm init

這個指令主要是創建 package.json 檔案
紀錄應用程式所需要的套件
需要注意的是
一定要先建立這個檔案
後面下安裝指令才能夠同時設定好依賴（dependencies）屬性
執行的時候系統才找的到這些資源喔

Webpack

是一套前端打包工具
提供模組化的開發方式
主要功能是將靜態資源打包成優化後的程式碼
(例如將擴充語法轉換成最基本的JS語法)
使用前必須先安裝 NodeJS
可透過指令或修改 config 檔實現各種功能

安裝方式

於 CMD 或 Terminal 中
透過 npm 指令安裝 webpack 以及 webpack-dev-server
輸入指令:

• npm install webpack --save
• npm install webpack-dev-server -g--save

指令裡的參數：
--save 是在安裝的同時要求將模組名稱及版本自動加入到 package.json 中的 dependencies 參數中
-g 則是將 package 安裝為全域（global）的狀態

如果沒辦法使用這些指令
可能是因為 環境變數 沒有設定好
可以將執行目錄切換到 npm 的所在位置執行或者至系統環境變數中加上 npm 的路徑

使用方式

於 CMD 或 Terminal 中
切換至 webpack.config.js 存放的目錄位置
輸入指令:

• webpack
  在開發模式執行一次建置
• webpack -p
  建置 production-ready 的程式碼
• webpack --watch
  (推推)在開發模式下每當程式碼有更動時自動更新裝置
• webpack -d
  產生 source maps 檔案

Babel

Babel 是一套 JavaScript 的編譯器(compiler)
協助將 ES6+ 語法轉換成目前瀏覽器支援度較高的 ES5 語法
避免使用者瀏覽器無法正常顯示的問題產生

安裝方式

於 CMD 或 Terminal 中
透過npm安裝Bable本體和擴充元件
輸入指令：

• npm install -g babel

• npm install -g babel-cli

• npm install babel-core

• npm install babel-loader

• npm install babel-preset-react

• npm install babel-preset-es2015

React & React Dom

要寫 React 的程式
當然要安裝他的本體
ReactDom 則是 React 使用的虛擬 DOM（Virtual DOM）
是 React 在渲染（render）時所要使用到的東西

安裝方式

於 CMD 或 Terminal 中
透過 npm 安裝 React 的擴充元件

輸入指令：

• npm install react --save
• npm install react-dom --save

好的
看到這邊相信大家都累了
真的是辛苦了

這篇已經將需要事先安裝的工具都交代完畢了
下一篇就可以直接來測試環境囉!
大家可以先讓眼睛休息一下
保養一下視網膜哈哈
我們下篇待續...

名詞註記

• V8
  由Google所開發的開源JavaScript引擎，會先將JavaScript程式碼編譯成機器碼再執行，以提升程式運行效能。
• Source Map
  原始碼映射資料表，紀錄「用於執行的程式碼」與「當初撰寫的程式碼」內容對應資料的檔案，可以提升除錯(debug)時的速度及效率。
• ES5、ES6+
  為JavaScript語法版本名稱，瀏覽器目前對ES6+（ ES6、ES7等等較新版本的合稱 ）的支援性相比較低。
  *Loader
  載入器、加載器或稱作載入程式，是作業系統的一部分，如同名稱負責把要執行的程式載入記憶體。

參考資料

1. tutorialspoint-ReactJS Tutorial
2. React 開發環境設置與 Webpack 入門教學
3. 如何使用 Webpack 模組整合工具
4. w3schools.com
5. 維基百科
6. EddyChang 部落格
7. npm官方文件
8. Babel

>>> 隊友任意門 <<<

• Eva Vue.js 30天隨身包
• Ben那些年，我們一起錯過的Javascript
• Ray激戰ReactJS 30天

Day3 end
by 瑞Ray (ﾉ>ω<)ﾉ